<template>
    <div>

        <div class="box-a"></div>
    </div>
</template>
<script>
export default {};
</script>
<style scoped>
.box-a{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: myframe 3s infinite;
    border-radius: 50px;
}
@keyframes myframe{
   0%{
       background: red;
       left: 0px;
        top:0px;
    }
    25%{
       background: yellow;
       left: 200px;
        top:0px;
    }
    50%{
       background: blue;
       left: 200px;
        top:200px;
    }
    75%{
       background: green;
       left: 0px;
        top:200px;
    }
    100%{
       background: red;
       left: 0px;
        top:0px;
    }
}
</style>